<template>
  <div>
    <div class="EditPostButton">
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="small"
        @click="submit()"
        >提交</el-button
      >
      <el-button icon="el-icon-back" size="small" @click="returnFn()">返回</el-button>
    </div>
    <div class="EditPostInput">
      <el-row>
        <el-col :span="12">
          <el-input v-model="input" placeholder="文章标题"></el-input>
          <el-col :span="8" class="EditPostSelect">
            <el-select v-model="form.type" placeholder="请选择活动区域">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="16">
            <el-input
              v-model="author"
              placeholder="作者"
              class="EditInput"
            ></el-input>
          </el-col>
        </el-col>
        <el-col :span="12">
          <el-col :span="2">
            <span class="EditPostSpan">题图</span>
          </el-col>
          <el-col :span="22">
            <el-upload
              class="EditPostUpload"
              :multiple="false"
              :action="uploadUrl"
              :headers="uploadHeaders"
              :on-success="handleUploadSuccess"
            >
              <!-- http-request默认行为取消 进行自定义上传 -->
              <i class="el-icon-upload"></i>
              <div class="EditPostel-upload__text">上传图片</div>
            </el-upload>
          </el-col>
        </el-col>
      </el-row>

      <div class="text">
        <div>
          <vue-editor v-model="content" />
        </div>
        <el-button class="EditPostUpLoadButton" type="primary" size="small"
          ><i class="el-icon-upload" @click="EditPostDialog()"
            >上传图片</i
          ></el-button
        >
        <el-dialog
          v-DragWindow
          :visible.sync="dialogVisible"
          width="60%"
          :before-close="handleClose"
        >
          <el-upload
            class="EditPostUploadBelow"
            :multiple="false"
            :action="uploadUrl"
            :headers="uploadHeaders"
            :on-success="handleUploadSuccess"
          >
            <!-- http-request默认行为取消 进行自定义上传 -->

            <el-button type="primary" class="belowtext">上传图片</el-button>
          </el-upload>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";
import { GetCookie } from "@/config/config";
import { article } from "@/api/EditPost";
export default {
  name: "EditPost",
  data() {
    return {
      uploadUrl: "http://localhost:9528/dev-api/file",
      uploadFileId: "",
      uploadHeaders: {
        Authorization: GetCookie("token"),
      },
      content: "",
      dialogVisible: false,
      input: "",
      author:"",
      form: {
        type: "1",
      },
      options: [
        { label: "动态咨询", value: "1" },
        { label: "产品服务", value: "2" },
        { label: "解决方案", value: "3" },
        { label: "精选案例", value: "4" },
      ],
    };
  },
  mounted() {},
  
  methods: {
    //返回
    returnFn(){
      this.$router.push({ path: "./ArticleManagement"});
    },
    //提交
    submit() {
      let _self = this;
      let data = {
        author: _self.author,
        content: "<p>123</p>",
        idChannel: _self.form.type,
        img: _self.uploadFileId,
        title: _self.input,
      }
      article(data).then((res) => {
        console.log(res);
        if(res.code == 20000){
          this.$router.push({ path: "./ArticleManagement"});
        }
      });
      console.log(1111);
    },
    //上传
    handleUploadSuccess(response, raw) {
      console.log(response);
      if (response.code === 20000) {
        this.uploadFileId = response.data.realFileName;
        this.uploadFileId = response.data.originalFileName;
      } else {
        this.$message({
          message: this.$t("common.uploadError"),
          type: "error",
        });
      }
    },
    //起弹窗
    EditPostDialog() {
      let _self = this;
      _self.dialogVisible = true;
    },
    //关闭弹窗
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  components: { VueEditor },
};
</script>

<style scoped>
.EditPostButton {
  margin: 20px;
}
.EditPostInput {
  margin: 10px;
}
.EditInput {
  padding-left: 10px;
  width: calc(100% - 10px);
  margin: 5px 0;
}
.EditPostSpan {
  margin-left: 10px;
  display: block;
  text-align: center;
}
.EditPostSelect {
  margin: 5px 0;
}
.EditPostUpLoad {
  position: absolute;
  right: 15px;
  top: 325px;
}
.EditPostUpload {
  margin: 20px;
  width: 50%;
  font-size: 100px;
  border: 1px dashed rgb(214, 209, 209);
  text-align: center;
  color: #c0c4cc;
}
.EditPostel-upload__text {
  font-size: 16px;
}
.text {
  position: relative;
}
.EditPostUpLoadButton {
  position: absolute;
  right: 15px;
  top: 8px;
}
.EditPostUploadBelow {
  margin: 10px;
  width: calc(100% - 20px);
  height: 150px;
  /* font-size: 100px; */
  border: 1px dashed rgb(214, 209, 209);
  text-align: center;
  color: #c0c4cc;
}
.belowtext {
  margin-top: 55px;
}
</style>